<template>
  <div class="week">
    <div class="week-top">
      <img
        src="https://img2.epetbar.com/2024-03/12/11/21d84ed6c96a731ae60592d20611bfb8.png?x-oss-process=style/water"
        alt=""
      />
    </div>
    <div class="now">
      <div class="some" v-for="product in fengqiang" :key="product.gid">
        <div class="top">限时4.3折扣</div>

        <div class="count-box">
          <div class="count-img">
            <div>
              <img :src="product.image.img_url" />
            </div>
          </div>
  <div class="count-text">{{ product.brandName }}</div>
 <div class="qian">
          <span class="befor">￥{{ product.sale_price }}</span>
          <span class="after" style="text-decoration: line-through;"> ￥{{ product.little_price }}</span>
        </div>
        </div>
      
       
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    fengqiang: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style lang="scss" scoped>
.week {
  width: 355px;
  height: 200px;
  background-color: palegoldenrod;
  margin: 0 auto;
  .week-top {
    width: 355px;
    height: 49px;
    img {
      width: 355px;
      height: 49px;
    }
  }
  .now {
    width: 360px;
    height: 200px;
    display: flex;
    overflow: hidden;
    overflow-x: auto;
    .some {
      width: 86px;
      height: 199px;
      background-color: #ffe9e3;
      box-sizing: border-box;
      .top {
        width: 86px;
        background: rgb(255, 189, 189);
        color: rgb(234, 45, 65);
        height: 18px;
        line-height: 18px;
        border-radius: 4px 4px 0 0;
        font-size: 12px;
        text-align: center;
      }
.count-box{
     .count-img {
        width: 75px;
        height: 75px;
        img {
          width: 75px;
          height: 75px;
        }
      }
      .count-text {
        width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        box-sizing: border-box;
        font-size: 12px;
    white-space: nowrap;
      }
      .qian {
        width: 84px;
        height: 19px;
        display: flex;
        overflow: hidden;
        font-size: 12px;
        -webkit-transform-origin-x: 0;
        -webkit-transform: scale(0.84);
        font-weight: 700;
        color: white;
        background: linear-gradient(90deg, #f54f42, #ef8166);
        border-radius: 4px;
        span {
          margin-left: 2px;
        }
      }
}
    
    }
  }
}
</style>